@import "color";
@import "public";

.added_px_box {
    .added_top {
        background: #fff;
        border-radius: 5px;
        padding: 15px 30px;

        .added_top_logo {
            width: 127px;
            height: 45px;
            float: left;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .added_top_text {
            font-size: 18px;
            color: #183884;
            font-weight: bold;
            margin-left: 60px;
            float: left;
            line-height: 45px;
        }

        .added_top_btn {
            float: right;
            width: 140px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 16px;
            color: #fff;
            background: #183884;
            border-radius: 20px;
            margin-top: 4px;
            cursor: pointer;
        }
    }

    .added_ourserver {
        margin-top: 30px;
        // height: 440px;
        background-image: url('../../dist/images/added/banner_bg.png');
        background-repeat: no-repeat;
        background-size: cover;
        padding: 30px;

        .top {
            font-size: 18px;
            color: #fff;
            text-align: center
        }

        .top_btn {
            margin: 25px auto;
            width: 140px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 20px;
            border: 1px solid #fff;
            color: #fff;
            cursor: pointer;
        }

        .top_btn:hover {
            background: #fff;
            color: $text-color
        }

        .server_box {
            display: flex;
            justify-content: space-between;

            .server {
                width: 18%;
                // padding: 0 20px;

                .title {
                    font-size: 16px;
                    color: #fff;
                    position: relative;
                    text-align: center;
                    width: 102px;
                    margin: 0 auto;
                }

                .title::after {
                    position: absolute;
                    content: '';
                    width: 50px;
                    height: 2px;
                    top: 32px;
                    left: 27px;
                    background: #fff;
                }

                .info {
                    font-size: 14px;
                    color: #fff;
                    text-align: center;
                    margin-top: 32px;
                    min-width: 180px;
                    overflow: hidden;
                }

                .con {
                    font-size: 14px;
                    color: #fff;
                    margin-top: 25px;
                    line-height: 30px;
                    max-height: 210px;
                    overflow: hidden;
                    min-height: 150px
                }

                .more {
                    width: 80px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    border-radius: 20px;
                    border: 1px solid #fff;
                    margin: 30px auto 0;

                    a {
                        color: #fff;
                    }
                }

                .more:hover {
                    background: #fff;

                    a {
                        color: $text-color
                    }
                }
            }
        }
    }

    .added_banner {
        // height: 200px;
        margin-top: 30px;
        background-image: url('../../dist/images/added/banner_tl.png');
        background-repeat: no-repeat;
        background-size: cover;
        padding: 60px 0;

        .con {
            font-size: 18px;
            text-align: center;
            color: #fff
        }
    }

    .added_tabs {
        display: flex;
        justify-content: space-between;
        height: 65px;
        background: #e9eaeb;
        color: #526069;
        line-height: 65px;

        li {
            width: 25%;
            text-align: center;
            cursor: pointer;
            overflow: hidden;
        }

        .active {
            background: #4f7cf3;
            color: #fff
        }
    }

    .added_tabs_con {
        .tabs_con {
            display: none;

            .left_one {
                width: 50%;
                height: 388px;
                background: #fff;
                float: left;

                .left_one_img {
                    width: 397px;
                    height: 150px;
                    margin: 125px auto 0;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .left_one_img2 {
                    width: 219px;
                    height: 219px;
                    margin: 82px auto 0;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .right_one {
                width: 50%;
                height: 388px;
                background: #fff;
                float: left;

                .title {
                    margin-top: 60px;
                    font-size: 16px;
                    color: #183884;
                    position: relative;
                    padding-left: 20px;
                }

                .title::before {
                    content: '';
                    position: absolute;
                    height: 16px;
                    width: 2px;
                    top: 0;
                    left: 0;
                    background: #42bdf6;
                }

                p {
                    margin-top: 18px;
                    font-size: 14px;
                    color: $text-color;
                    line-height: 35px;
                    width: 90%;
                    max-height: 200px;
                    overflow: hidden;
                }
            }

            .right_two {
                width: 50%;
                height: 388px;
                background: #fff;
                float: left;

                .right_two_con {
                    width: 90%;
                    padding-left: 90px;

                    .title {
                        margin-top: 60px;
                        font-size: 16px;
                        color: #183884;
                        position: relative;
                        padding-left: 20px;
                    }

                    .title::before {
                        content: '';
                        position: absolute;
                        height: 16px;
                        width: 2px;
                        top: 0;
                        left: 0;
                        background: #42bdf6;
                    }

                    p {
                        margin-top: 18px;
                        font-size: 14px;
                        color: $text-color;
                        line-height: 35px;
                        width: 100%;
                    }
                }

            }
        }

        .tabs_content {
            padding: 60px 0;
            background: #fff;

            .title {
                margin: 0 auto;
                font-size: 16px;
                color: #183884;
                position: relative;
                padding-left: 20px;
            }

            .title::before {
                content: '';
                position: absolute;
                height: 16px;
                width: 2px;
                top: 3px;
                left: 0;
                background: #42bdf6;
            }

            .title_info {
                margin-top: 30px;
                font-size: 16px;
                color: $info-color;
                text-align: center
            }

            .ti1 {
                width: 240px;
            }

            .ti2 {
                width: 78px;
            }

            .ti3 {
                width: 184px;
                margin-top: 30px;
            }

            .ti5 {
                width: 250px;
            }

            .tabs_con_three {
                display: flex;
                justify-content: space-around;

                .left {
                    width: 30%;

                    .left_p {
                        font-size: 14px;
                        color: $text-color;
                        line-height: 35px;
                        margin-top: 70px;
                        width: 80%;
                        margin-left: 15%;
                        text-indent: 2em;
                        max-height: 210px;
                        overflow: hidden;
                    }
                }

                .mid {
                    width: 30%;

                    .mid_img {
                        width: 390px;
                        height: 377px;
                        margin: 50px auto;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                .four_one {
                    width: 18%;
                    display: flex;

                    .four_one_img {
                        width: 60px;
                        height: 60px;

                        img {
                            width: 60px;
                            height: 100%;
                        }
                    }

                    .four_one_text {
                        font-size: 14px;
                        color: $text-color;
                        margin-top: 7%;
                        margin-left: 15px;
                    }

                    .four_one_text2 {
                        font-size: 14px;
                        color: $text-color;
                        line-height: 1.8;
                        margin-left: 15px;
                        max-height: 80px;
                        overflow: hidden;
                    }
                }

                .imge_text {
                    width: 11%;
                    text-align: center;

                    div {
                        font-size: 14px;
                        color: $text-color;
                        line-height: 30px;
                        margin-top: 25px;
                    }
                }
            }

            .tabs_con_four {
                width: 70%;
                margin: 0 auto 0;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                .tabs_bg {
                    width: 48%;
                    background-image: url('../../dist/images/added/disc_bg.png');
                    background-repeat: no-repeat;
                    background-size: cover;
                    height: 150px;
                    margin-top: 30px;
                    display: flex;

                    .left {
                        width: 30%;
                        text-align: center;
                        line-height: 150px;
                        color: #fff;
                        font-size: 100px;
                        border: 1px dotted #fff
                    }

                    .right {
                        padding-left: 50px;
                        color: #fff;

                        .top {
                            margin-top: 15%;
                            font-size: 16px
                        }

                        .bottom {
                            margin-top: 15px;
                        }
                    }
                }
            }

            .tabs_con_thbottom {
                width: 30%;
                margin: 0 auto;
                font-size: 14px;
                color: $text-color;
                line-height: 35px;
                text-indent: 2em;
                max-height: 210px;
                overflow: hidden;
            }
        }
    }

    .bottom_img {
        width: 100%;

        img {
            width: 100%;
            height: 454px;
        }
    }
}

.added_jz_box {
    .top_banner {
        height: 150px;
        width: 100%;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .big_title {
        margin-top: 30px;
        font-size: 18px;
        color: $title-color;
        text-align: center
    }

    .flex_bet {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;

        .flex_box {
            padding: 30px;
            background: #fff;
            width: 20%;
            text-align: center;

            .flex_box_img {
                width: 100px;
                height: 100px;
                margin: 0 auto;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .title {
                font-size: 16px;
                color: $title2-color;
                margin-top: 25px;
            }

            .con {
                font-size: 14px;
                color: $text-color;
                margin-top: 20px;

                p {
                    margin-top: 5px;
                }
            }
        }

        .flex_box:hover {
            box-shadow: 0 .5375rem 1.275rem rgba(0, 0, 0, 0.1);
        }

    }

    .how_finsh {
        margin-top: 30px;
        background: #fff;
        padding: 40px 30px;

        .process {
            width: 78%;
            margin: 0 auto;
            height: 176px;
            position: relative;

            .process_set {
                width: 12%;
                position: relative;
                float: left;

                .process_pro {
                    text-align: center;
                    color: $text-color;
                    letter-spacing: 2px;
                    height: 115px;
                    width: 142px;
                    background-image: url('../../dist/images/added/Dialog2.png');
                    background-repeat: no-repeat;
                    background-size: cover;

                    .process_protext {}
                }

                .pp2 {
                    span {
                        margin-top: 33px;
                        display: inline-block;
                    }
                }

                .pp4 {
                    span {
                        margin-top: 33px;
                        display: inline-block;
                    }
                }

                .pp1 {
                    line-height: 90px;
                    // position: relative;
                }

                .pp3 {
                    line-height: 90px;
                    // position: relative;
                }

                .pp1::after {
                    content: '01';
                    position: absolute;
                    color: #526069;
                    font-size: 24px;
                    left: 35px;
                    bottom: -124px;
                }

                .pp3::after {
                    content: '02';
                    position: absolute;
                    color: #526069;
                    font-size: 24px;
                    left: 35px;
                    bottom: -124px;
                }

                .pp2::after {
                    content: '03';
                    position: absolute;
                    color: #526069;
                    font-size: 24px;
                    left: 40px;
                    bottom: -91px;
                }

                .pp4::after {
                    content: '04';
                    position: absolute;
                    color: #526069;
                    font-size: 24px;
                    left: 40px;
                    bottom: -91px;
                }
            }

            .process_set::after {
                content: '';
                position: absolute;
                background-image: url('../../dist/images/added/circle.png');
                background-repeat: no-repeat;
                background-size: cover;
                left: 42px;
                width: 20px;
                height: 20px;
                z-index: 9;
                bottom: -53px;
            }

            .process_set::before {
                contain: '01';
                position: absolute;
                font-size: 24px;
                color: #526069;
                left: 42px;
                bottom: -73px
            }

            .process_text {
                float: left;
                font-size: 16px;
                color: #526069;
                text-align: center;
                width: 17%;
                margin-top: 118px;
            }
        }

        .process::after {
            content: '';
            position: absolute;
            height: 5px;
            background: #f2f4f5;
            left: -86px;
            bottom: 20px;
            width: 111%;
        }
    }
    .process_btn{
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 20px;
        background: #42bdf6;
        margin: 86px auto 0;
        a{
            color: #fff
        }
    }
    .how_way{
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        .way_box{
            width: 30%;
            background: #fff;
            padding: 30px 0;
            border-radius: 5px;
            .top_title{
                text-align: center;
                font-size: 16px;
                color: #526069
            }
            .con_ul{
                width: 80%;
                margin: 0 auto;
                li{
                    font-size: 14px;
                    color: $text-color;
                    line-height: 30px;
                    span{
                        margin-right: 5px;
                    }
                }
            }
        }
        .way_box:hover{
            background: #42bdf6;
            .top_title{
                color: #fff;
            }
            li{
                color: #fff
            }
        }
    }
}

@media screen and(max-width:1440px) {
    .added_px_box .added_tabs_con .tabs_content .tabs_con_three .imge_text div {
        font-size: 12px;
        line-height: 20px;
    }

    .added_jz_box .flex_bet .flex_box {
        width: 19%;
    }

    .added_jz_box .how_finsh .process::after {
        left: -60px;
    }
}

@media screen and(max-width:1366px) {
    .added_jz_box .flex_bet .flex_box {
        width: 18%;
    }
}

@media screen and(max-width:1680px) {
    .added_jz_box .flex_bet .flex_box {
        width: 19%;
    }

    .added_jz_box .how_finsh .process .process_set {
        width: 15%;
    }

    .added_jz_box .how_finsh .process .process_text {
        width: 13%;
    }
}